<script setup lang="ts">
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import "plus-pro-components/es/components/search/style/css";
import { ref } from "vue";
import { usePagination } from "@/hooks/usePagination";
defineOptions({
  name: "AccountsPayable"
});
const pagination = usePagination();
const option = ref({
  tooltip: {
    trigger: "axis",
    position: function (point, params, dom, rect, size) {
      // point: 鼠标位置，格式为 [x, y]
      // params: 提示框所包含的数据信息
      // dom: 提示框的 DOM 元素
      // rect: 鼠标所在图形的包围盒，格式为 {x, y, width, height}
      // size: 提示框的大小，格式为 {contentSize: [width, height], outerSize: [width, height]}
      return [point[0] - 50, point[1] - 50]; // 设置提示框在鼠标上方 20px 处
    },
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999"
      }
    }
  },
  legend: {
    type: "scroll",
    data: ["未付金额（本币）", "延迟未付金额（本币）", "最大延迟付款天数"]
  },
  xAxis: [
    {
      type: "category",
      data: [
        "三阳开泰",
        "中铁二局",
        "测试账号",
        "荣耀集团",
        "TOP科技有限",
        "OBU",
        "广州总公司",
        "琵琶蜂蜜",
        "员工"
      ],
      axisPointer: {
        type: "shadow"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value}元"
      }
    },
    {
      type: "value",
      axisLabel: {
        formatter: "{value} 天"
      }
    }
  ],
  series: [
    {
      name: "未付金额（本币）",
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value + " 元";
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: "延迟未付金额（本币）",
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value + " 元";
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: "最大延迟付款天数",
      type: "line",
      smooth: true,
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + "天";
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
});
const columns = ref([
  {
    label: "总计",
    prop: "name",
    // headerRenderer: (row, a, b) => {
    //   console.log(row, a, b);
    //   return "hahah";
    // },
    children: [
      {
        prop: "name",
        label: "供应商名称"
      },
      {
        prop: "amount1",
        label: "应付单号"
      },
      {
        prop: "amount2",
        label: "项次"
      },
      {
        prop: "amount3",
        label: "分期"
      },
      {
        prop: "amount1",
        label: "账款单性质"
      },
      {
        prop: "amount2",
        label: "业务部门"
      },
      {
        prop: "amount3",
        label: "业务人员"
      },
      {
        prop: "amount1",
        label: "立账日期"
      },
      {
        prop: "amount1",
        label: "应付日"
      },
      {
        prop: "amount1",
        label: "金额"
      }
    ]
  }
]);
const data = ref([
  {
    id: "12987122",
    name: "Tom1",
    amount1: "234",
    amount2: "3.2",
    amount3: 10
  },
  {
    id: "12987123",
    name: "Tom2",
    amount1: "165",
    amount2: "4.43",
    amount3: 12
  },
  {
    id: "12987124",
    name: "Tom3",
    amount1: "324",
    amount2: "1.9",
    amount3: 9
  },
  {
    id: "12987125",
    name: "Tom4",
    amount1: "621",
    amount2: "2.2",
    amount3: 17
  },
  {
    id: "12987126",
    name: "Tom5",
    amount1: "539",
    amount2: "4.1",
    amount3: 15
  }
]);
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};
const changePagination = () => {};
</script>

<template>
  <div class="page-content">
    <el-card class="card">
      <div class="text-center py-[10px] text-xl font-bold">
        实时应付未付账款明细
      </div>
      <div
        class="text-sm flex justify-between items-center pb-[10px] border-b-[1px] border-solid mb-[10px]"
      >
        <span>法人编号：DSCNJ 截止应付款日：2025/04/11</span>
        <span>刷新时间2025-04-11 08:53:02</span>
      </div>
      <div class="h-[300px]">
        <EChartsComponent :extraOptions="option" type="bar" />
      </div>
    </el-card>
    <el-card class="card">
      <div class="operate">
        <el-button type="primary">导出</el-button>
      </div>
      <PureTable
        ref="tableRef"
        border
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :data="data"
        :columns="columns"
        :pagination="pagination"
        :span-method="objectSpanMethod"
        @page-current-change="changePagination"
      />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.card {
  margin-top: 20px;
}
.operate {
  margin-bottom: 20px;
}
</style>
